<template>
  <div>
    <div v-if="editOpen">
      <t-table  :selected-row-keys="selectedRowKeys"
                @select-change="(val)=>{selectedRowKeys=val}" :data="data"
                :columns="columns" rowKey="id">
        <template #index="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
        <template #year="{row}">
          <t-date-picker @change="()=>{ if(row.year!==''){row.yearStatus='default'} }" :status="row.yearStatus"  mode="year" v-model="row.year"  allow-input clearable>
            <div slot="tips" v-if="row.yearStatus==='error'">不能为空</div>
          </t-date-picker>
        </template>
        <template #planTarget="{row}">
          <t-textarea @change="()=>{ if(row.planTarget!==''){row.planTargetStatus='default'} }" :status="row.planTargetStatus" clearable :autosize="{minRows: 3}" v-model="row.planTarget">
            <div slot="tips" v-if="row.planTargetStatus==='error'">不能为空</div>
          </t-textarea>
        </template>
      </t-table>
      <div style="margin-top: 10px" class="btn-group-inline">
        <t-button @click="addPlan">新增</t-button>
        <t-button @click="upPlan">上移</t-button>
        <t-button @click="downPlan">下移</t-button>
        <t-button @click="delPlan">删除</t-button>
      </div>
    </div>
    <div v-else>
      <t-table  :selected-row-keys="selectedRowKeys"
                @select-change="(val)=>{selectedRowKeys=val}" :data="data"
                :columns="columns2" rowKey="id">
        <template #index="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
        <template #year="{row}">
          {{ row.year }}
        </template>
        <template #planTarget="{row}">
          {{row.planTarget}}
        </template>
      </t-table>
    </div>

  </div>
</template>

<script>
export default {
  name: "contract-year-plan",
  props:{
    value:Array,
    projectId: [String,Number],
    contractId: [String,Number],
    editOpen: {
      type: Boolean,
      default: false
    },
  },
  data(){
    return {
      selectedRowKeys: [],
      data:[],
      columns: [
        {
          colKey: 'row-select',
          type: 'single',
          title: "选择",
          width: 64
        },
        {
          colKey: 'index',
          title: "序号",
          align: "center",
          width: 64
        },
        {
          colKey: "year",
          title: "年度",
          width: 240
        },
        {
          colKey: "planTarget",
          title: "年度计划及年度目标",
          align: "center"
        },
      ],
      columns2: [
        {
          colKey: 'index',
          title: "序号",
          align: "center",
          width: 64
        },
        {
          colKey: "year",
          title: "年度",
          width: 240
        },
        {
          colKey: "planTarget",
          title: "年度计划及年度目标",
          align: "center"
        },
      ],
    }
  },
  watch: {
    projectId: {
      immediate: true,
      handler(val) {
        if (val) {
          this.getPlan(val);
        }
      }
    },
    data:{
      deep: true,
      immediate: true,
      handler(val) {
        this.$emit("input", val);
      }
    }
  },
  methods:{
    checkData() {
      if (this.data.length <= 0) {
        this.$message.error("年度计划及年度目标不能为空");
        return false;
      }
      const isValidate = this.data.every((val, index) => {
        if (val.year === "") {
          this.$set(this.data[index], 'yearStatus', 'error')
          this.$message.error(`项目研究的年度计划及年度目标：第${index + 1}条"年度"不能为空`);
          return false;
        }
        this.$set(this.data[index], 'yearStatus', 'default')

        if (val.planTarget === "") {
          this.$set(this.data[index], 'planTargetStatus', 'error')
          this.$message.error(`项目研究的年度计划及年度目标：第${index + 1}条"年度计划及年度目标"不能为空`);
          return false;
        }
        this.$set(this.data[index], 'planTargetStatus', 'default')
        return true;
      });
      return isValidate
    },
    getPlan(){
      if(this.projectId){
        this.$api.kjxm.contract.researchPlanGetByProjectId(Number(this.projectId)).then(response => {
          this.data = response.data;
          this.$emit("input", this.data);
        }).catch((e) => {
          this.$message.error(e.toString());
        });
      }
    },
    addPlan() {
      this.data.push({
        id: Date.parse(new Date()),
        year: '',
        planTarget: "",
        projectId: Number(this.projectId),
        contractId: this.contractId
      })
    },
    upPlan() {
      if (this.selectedRowKeys.length <= 0) {
        this.$message.warning("请选择一行");
        return;
      }
      if (this.data[0].id === this.selectedRowKeys[0]) {
        this.$message.warning("已是第一行");
      } else {
        const index = this.data.findIndex((val) => val.id === this.selectedRowKeys[0])
        this.moveInArray(this.data, index, index - 1)
      }
    },
    downPlan() {
      if (this.selectedRowKeys.length <= 0) {
        this.$message.warning("请选择一行");
        return;
      }
      if (this.data[this.data.length - 1].id === this.selectedRowKeys[0]) {
        this.$message.warning("已是最后一行");
      } else {
        const index = this.data.findIndex((val) => val.id === this.selectedRowKeys[0])
        this.moveInArray(this.data, index, index + 1)
      }
    },
    delPlan() {
      if (this.selectedRowKeys.length <= 0) {
        this.$message.warning("请选择一行");
        return;
      }
      const index = this.data.findIndex((val) => val.id === this.selectedRowKeys[0])
      this.data.splice(index, 1)
      this.selectedRowKeys = [];
    },
    moveInArray(arr, ffrom, to) {
      // 删除当前的位置
      const item = arr.splice(ffrom, 1);
      // 确保还剩有元素移动
      if (!item.length) {
        this.$message.warning(`There is no item in the array at index ${ffrom}`);
      }
      // 移动元素到指定位置
      arr.splice(to, 0, item[0]);
    },
  }
}
</script>

<style scoped>

</style>
